<template>
  <div id="app">

    <div class="container">
    <nav>
      <ul>
        <li><router-link to="/home" active-class="active">首页</router-link></li>
        <li><router-link to="/about" active-class="active">关于我</router-link></li>
        <li><router-link to="/products" active-class="active">产品中心</router-link></li>
        <li><router-link to="/contact" active-class="active">联系我</router-link></li>
        <li><router-link to="/Aichat" active-class="active">暴躁AI助手</router-link></li>
      </ul>
    </nav>
    <main>
      <router-view />
    </main>
    <imgShare>  </imgShare>
    </div>
    
    <footer>
      <p>&copy; 2025 任务管理器 - 让工作更高效</p>
    </footer>
  </div>
</template>

<script>
import imgShare from './components/imgShare.vue'

export default {
  name: 'App',
  components: {
    imgShare
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex-direction: row;
  margin-left: 100px; /* 为固定的导航栏留出空间 */
  height: 100vh;
  overflow: hidden; /* 防止页面整体滚动 */
}
nav {
  background-color: #35495e;
  padding: 1rem 0;
  height: 100vh; /* 固定高度为视口高度 */
  width: 100px; /* 固定宽度 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  gap: 2rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

nav a:hover,
nav a.active {
  background-color: #42b983;
}

main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto; /* 允许内容滚动 */
  height: calc(100vh - 4rem); /* 减去padding的高度 */
}

footer {
  background-color: #f8f9fa;
  padding: 1rem 0;
  text-align: left;
  color: #666;
  border-top: 1px solid #e9ecef;
}

</style>